<template>
    <div class="home">
        <UserInfo/>
        <div class="module-list">
            <div class="list-wrap">
                <div class="module-item" @click="jumpToModule(1)">
                    <div class="module-content module-1"></div>
                    <div class="module-title module-title-1">单人挑战</div>
                </div>
                <div class="module-item" @click="jumpToModule(2)">
                    <div class="module-content module-2"></div>
                    <div class="module-title module-title-2">排位赛</div>
                </div>
                <div class="module-item" @click="jumpToModule(3)">
                    <div class="module-content module-3">排行榜</div>
                    <!--<div class="module-title module-title-3">亲子合作</div>-->
                </div>
                <div class="module-item" @click="jumpToModule(4)">
                    <div class="module-content module-4"></div>
                    <div class="module-title module-title-4">个人中心</div>
                </div>
                <div class="module-item" @click="jumpToModule(9)">
                    <div class="module-content module-9"></div>
                    <div class="module-title module-title-9">我要挑错</div>
                </div>
            </div>
            <div class="list-wrap">
                <div class="module-item" @click="jumpToModule(5)">
                    <div class="module-content module-5"></div>
                    <div class="module-title module-title-5">匹配模式</div>
                </div>
                <div class="module-item" @click="jumpToModule(6)">
                    <div class="module-content module-6"></div>
                    <div class="module-title module-title-6">好友对战</div>
                </div>
                <div class="module-item" @click="jumpToModule(7)">
                    <div class="module-content module-7">兑换商城</div>
                </div>
                <div class="module-item" @click="jumpToModule(8)">
                    <div class="module-content module-8"></div>
                    <div class="module-title module-title-8">我要出题</div>
                </div>
                <div class="module-item" @click="jumpToModule(10)">
                    <div class="module-content module-10"></div>
                    <div class="module-title module-title-10">使用规则</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // @ is an alias to /src
    import UserInfo from 'components/userInfo'
    import {mapGetters} from 'vuex'
    import {layerMsg} from "common/js/util";

    export default {
        name: 'home',
        components: {
            UserInfo
        },
        data(){
          return {
              moduleList:[]
          }
        },
        computed: {
            ...mapGetters('User', ['isLogin'])
        },
        mounted() {

        },
        methods:{
            jumpToModule(type){

                switch (type) {
                    case 1:
                        this.$router.push('/standStart');
                        break;
                    case 4:
                        this.$router.push('/personal');
                        break;
                    default:
                        layerMsg('模块'+type+'暂未开通');
                        break;
                }
            }
        }
    }
</script>
<style scoped lang="less">
    .home{
        width: 100%;
        height: 100vh;
        background: linear-gradient(#294a9b,#4bb4f6);
        padding: 0.3rem 0.35rem;
        overflow: scroll;
    }
    .module-list{
        display: flex;
        justify-content: space-between;
        margin-top: 0.25rem;
        .list-wrap{
            width: 48%;
            .module-item{
                width: 100%;
                border: 0.045rem solid #90d1ef;
                box-sizing:border-box;
                overflow: hidden;
                border-radius: 0.2rem;
                position: relative;
                margin-bottom: 0.1rem;
                box-shadow: 0 3px 3px rgba(77, 77, 77, 0.6);
                .module-content{
                    border-radius: 0.2rem;
                    min-height: 1.5rem;
                    background-color: #ff6400;
                    &.module-1{
                        background-color: #ff824a;
                        height: 3rem;
                    }
                    &.module-2{
                        background-color: #af68de;
                        height: 1.7rem;
                    }
                    &.module-3{
                        background-color: #e33f46;
                        height: 1.35rem;
                        line-height: 1.4rem;
                        font-size: 0.45rem;
                        color: #fff;
                        text-align: center;
                    }
                    &.module-4{
                        background-color: #5b69fe;
                        height: 2.2rem;
                    }
                    &.module-5{
                        background-color: #377fea;
                        height: 3.3rem;
                    }
                    &.module-6{
                        background-color: #7267e2;
                        height: 2rem;
                    }
                    &.module-7{
                        background-color: #015345;
                        height: 1.5rem;
                        line-height: 1.5rem;
                        font-size: 0.45rem;
                        color: #ffffff;
                        text-align: center;
                    }
                    &.module-8{
                        background-color: #ffba24;
                        height: 1.6rem;
                    }
                    &.module-9{
                        background-color: #50ceff;
                        height: 1.4rem;
                    }
                    &.module-10{
                        background-color: #b08cff;
                        height: 1.4rem;
                    }
                }
                .module-title{
                    border-bottom-left-radius: 0.2rem;
                    border-bottom-right-radius: 0.2rem;
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 0.85rem;
                    line-height: 0.85rem;
                    text-align: center;
                    color: #fff;
                    font-size: 0.45rem;
                    &.module-title-1{
                        background-color: #fb6846;
                    }
                    &.module-title-2{
                        background-color: #a547c3;
                    }
                    &.module-title-4{
                        background-color: #4545bf;
                    }
                    &.module-title-5{
                        background-color: #2a76c2;
                    }
                    &.module-title-6{
                        background-color: #8249be;
                    }
                    &.module-title-7{
                        background-color: #4545bf;
                    }
                    &.module-title-8{
                        background-color: #f18d15;
                    }
                    &.module-title-9{
                        background-color: #2ab7f1;
                    }
                    &.module-title-10{
                        background-color: #0775f1;
                    }

                }
            }
        }
    }
</style>
